<template>
  <div class="grid" ref="k1">
    <button class="button" @click="handleClick('1')">1</button>
    <button class="button" @click="handleClick('2')">2</button>
    <button class="button" @click="handleClick('3')">3</button>
    <button class="button" @click="handleClick('4')">4</button>
    <button class="button" @click="handleClick('5')">5</button>
    <button class="button" @click="handleClick('6')">6</button>
    <button class="button" @click="handleClick('7')">7</button>
    <button class="button" @click="handleClick('8')">8</button>
    <button class="button" @click="handleClick('9')">9</button>
    <button class="button" @click="handleClick('.')">.</button>
    <button class="button" @click="handleClick('0')">0</button>
    <button class="button" @click="remove">删除</button>
    <button class="button" style="grid-column-start: 1;grid-column-end: 4" @click="close">关闭</button>
  </div>
</template>

<script>

export default {
  name: "Keyboard",
  props: ['targetEvent'],
  methods: {
    handleClick(val) {
      this.targetEvent.target.value = this.targetEvent.target.value + val
      this.targetEvent.target.dispatchEvent(new Event('input', { bubbles: true }))
      // this.$set(this.value, 'time', (this.value.time || '') + val)
      // console.log('wwwwwwww')
      this.$emit('stopHidden')
    },
    close() {
      this.$refs.k1.style.visibility = 'hidden'
    },
    remove() {
      this.value = true
      if (this.targetEvent.target.value) {
        this.targetEvent.target.value = this.targetEvent.target.value.substring(0, this.targetEvent.target.value.length - 1)
        this.targetEvent.target.dispatchEvent(new Event('input', { bubbles: true }))
        // this.$set(this.value, 'time', this.value.time.substring(0, this.value.time.length - 1))
        this.$emit('stopHidden')
      }
    }
  }
}
</script>

<style>
.grid {
  background-color: white;
  position: absolute;
  z-index: 100;
  border: 1px solid #dcdfe6;
  padding: 2px;
  width: 150px;
  height: 200px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 2px;
  grid-column-gap: 2px;
  visibility: hidden;
}
.button {
  border: none;
  font-size: xx-small;
}
.button:active {
  background: #777;
  color: #FFF;
}
</style>
